<template>
    <van-sticky>
        <van-nav-bar title="详情页" left-arrow @click-left="onClickLeft()">
            <!-- <template #right><van-icon name="share" color="#29b3b1" /></template> -->
        </van-nav-bar>
    </van-sticky>
    <!--骨架屏列表-->
    <div v-if="isClothLoading">
        <van-skeleton :style="{ flexWrap: 'wrap' }">
            <template #template>
                <div class="cloth-skele-box">
                    <div class="pre-img">
                        <van-skeleton-image image-size="100%" />
                    </div>
                    <div class="pre-title">
                        <van-skeleton-paragraph row-width="60%" />
                        <van-skeleton-paragraph />
                    </div>
                </div>
            </template>
        </van-skeleton>
    </div>
    <div v-else>
        <!--复现商品的基本信息-->
        <van-image :src="clothInfo.cover" width="100%"></van-image>
        <div class="cloth-basic">
            <div class="current-price">￥{{ clothInfo.price ? clothInfo.price.toFixed(2) : 0.00 }}</div>
            <div class="discount-tag">优惠价</div>
            <div class="origin-price">￥{{ clothInfo.price && clothInfo.discount ? (clothInfo.price /
                clothInfo.discount).toFixed(2) : 0.00 }}</div>
        </div>
        <div class="cloth-title">{{ clothInfo.tag }}</div>
        <!--商品详情展示-->
        <!--展示商品的视频-->
        <div v-if="clothInfo.videos && JSON.parse(clothInfo.videos).length">
            <van-swipe>
                <van-swipe-item v-for="item in JSON.parse(clothInfo.videos)" :key="item">
                    <video-play :src="item" :title="clothInfo.tag" v-bind="videoOptions" :poster='clothInfo.cover' />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!--展示商品的详细照片-->
        <van-image v-for="item in clothInfo.description ? JSON.parse(clothInfo.description) : []" :src="item" width="100%"
            :key="item"></van-image>
    </div>

    <!-- 底部弹出 -->
    <van-popup :show="true" :overlay="false" :lock-scroll="false" position="bottom">
        <div class="bottom-bar-box" @click="shopClick()">
            <div class="icon-outer-box">
                <div class="icon-box">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" size="32px" name="service"></van-icon>
                    </div>
                    <div class="icon-label">客服</div>
                </div>
                <div class="icon-box">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" size="32px" name="save-unselected"></van-icon>
                    </div>
                    <div class="icon-label">收藏</div>
                </div>
                <div class="icon-box">
                    <div class="icon-bg">
                        <van-icon class-prefix="iconfont" size="32px" name="shopcar"></van-icon>
                    </div>
                    <div class="icon-label">购物车</div>
                </div>
            </div>
            <div class="goods-handle">
                <div class="goods-add text-center">加入购物车</div>
                <div class="goods-buy text-center">立即购买</div>
            </div>
        </div>
    </van-popup>
    <!--回顶部操作-->
    <van-back-top class="topbar-custom" right="25" bottom="100">
        <van-icon class-prefix="iconfont" size="32px" name="topbar"></van-icon>
    </van-back-top>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import _service from "../request/axios";

import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
import { showLoadingToast, showToast } from "vant";

//视频播放的参数配置
const videoOptions = ref({
    width: '100%', //播放器高度
    height: '450px', //播放器高度
    color: "#409eff", //主题色
    muted: false,
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false,  //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
})
const router = useRouter();
let id = router.currentRoute.value.query.id;
const clothInfo = ref("");
const isClothLoading = ref(true);

function shopClick(){
    showToast("系统不以商城为核心，只关注内容推荐哦~");
}

function onClickLeft() {
    router.back();
}
// showLoadingToast({
//     message: '加载中...',
//     forbidClick: true,
//     loadingType: 'spinner',
// });

_service.get("/cloth/detail?cloth_id=" + id).then(res => {
    clothInfo.value = res.data;
    isClothLoading.value = false;
})
</script>
<style lang="less">
.cloth-skele-box {
    width: 100%;


    .pre-img {
        height: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pre-title {
        margin-top: 20px;
    }
}

.cloth-basic {
    padding: 5px 10px;
    display: flex;
    align-items: center;

    .current-price {
        color: #b81717;
        font-size: 20px;
        font-weight: bold;

    }

    .discount-tag {
        font-weight: normal;
        color: #fff;
        background-color: #e94557;
        padding: 3px 6px;
        font-size: 14px;
        margin-left: 6px;
    }

    .origin-price {
        color: #b2b6bb;
        font-size: 16px;
        font-weight: normal;
        text-decoration: line-through;
        margin-left: 10px;
    }
}

.cloth-title {
    padding: 0px 10px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 25px;
}

.bottom-bar-box {
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;
    align-items: center;

    .icon-outer-box {
        display: flex;

        .icon-box {
            width: 50px;
        }

        .icon-bg {
            border-radius: 50%;
            padding: 5px;
            width: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .icon-label {
            font-size: 14px;
            color: #b3b3b3;
        }
    }

    .goods-handle {
        display: flex;
        text-align: center;
        height: 48px;
        font-size: 16px;
        color: #f1eeee;

        .text-center {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5px 10px;
        }

        .goods-add {
            background-color: #312f46;
        }

        .goods-buy {
            background-color: #ec0401;
        }
    }

}

.topbar-custom {
    width: 80px;
    font-size: 14px;
    text-align: center;
}
</style>
